{extend name="admin/base" /}
{block name="main"}

<input type="hidden" id="album_id" value="{$album_id}" />
<div class="allDelAdd row album" style="margin-left: 0">
    <div class="fl">
        <span class="allDel AP-add1">全选</span>
        <span class="allDel del AP-add2">反选</span>
        <span class="allDel del AP-add3">批量删除</span>
        <span class="allDel del AP-add4">移动素材</span>
        <!--<button class="albumBorder">上传素材<input type="file" id="fileupload" class="input-file" name="file_upload" multiple="multiple"/></button>-->
        <a href="javascript:void(0);" style="margin-top: -5px" class="btn btn-info btn-file">上传图片<input class="fileupload" type="file" name="file_upload" multiple=""></a>
        <a href="javascript:void(0);" style="margin-top: -5px" class="btn btn-info btn-file" data-is_video="1">上传视频<input class="fileupload" type="file" name="file_upload"></a>
    </div>

    <div class="fr allSort">
        <span class="searchFr gl_search">
            <input type="text" class="searchs" id='search_text' placeholder="素材搜索">
            <button class="search_to">搜索</button>
        </span>

        <select class="fr allSort_sel" id="is_use">
            <option value ="0">全部</option>
            <option value ="1">未使用</option>
        </select>

        <span class="fr" style="padding-top: 4px">筛选条件：</span>

    </div>
</div>

<div>
    <ul class="clearfix albums" id="albumList">
    </ul>
    <div class="page clearfix">
        <div class="M-box3 m-style fr">
        </div>
    </div>
</div>
<!-- page end -->


<!-- 移动素材模态框（Modal） -->
<div class="modal fade" id="change_album_class" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">选择相册</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <input type="hidden" id="change_pic_id" />
                    <div class="form-group">
                        <div class="col-sm-1"></div>
                        <label class="col-sm-3 control-label">相册名称</label>
                        <div class="col-sm-6">
                            <select class="form-control" name="album_id" id="change_album_id">
                                {foreach $album_list as $vo}
                                {if condition="$vo['is_default'] eq '1'"}
                                <option value="{$vo.album_id}"selected="selected">{$vo.album_name}</option>
                                {else /}
                                <option value="{$vo.album_id}">{$vo.album_name}</option>
                                {/if}
                                {/foreach}
                            </select>
                        </div>
                    </div>



                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary AP-add5">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<!-- /.modal -->
{/block}
{block name="script"}
<!--<script src="ADMIN_JS/file_upload.js" type="text/javascript"></script>-->
<script type="text/javascript">
    require(['utilAdmin', 'util', 'ajax_file_upload'], function (utilAdmin, util, ajaxFileUpload) {
        $(function () {
            LoadingInfo(1);
        });
        function LoadingInfo(page_index) {
            $('#page_index').val(page_index ? page_index : '1');
            var album_id = $("#album_id").val();
            $.ajax({
                type: "post",
                url: "{:__URL('ADMIN_MAIN/system/albumpicturelist')}",
                data: {
                    "page_index": page_index,
                    "page_size": $("#showNumber").val(),
                    "album_id": album_id,
                    "is_use": $("#is_use").val(),
                    "pic_name": $("#search_text").val()
                },
                success: function (data) {
                    var html = '';
                    if (data["data"].length > 0) {
                        for (var i = 0; i < data["data"].length; i++) {
                            html += '<li class="thumbnail">';
                            html += '<div>';
                            html += '<label class="imgHref">';
                            if (data["data"][i]["is_wide"]) {
                                html += '<video width="100%" height="100%" id="img_' + data["data"][i]["pic_id"] + '" src="' + __IMG(data["data"][i]["pic_cover"]) + '"></video>';
                            } else {
                                html += '<img id="img_' + data["data"][i]["pic_id"] + '" src="' + __IMG(data["data"][i]["pic_cover"]) + '">';
                            }
                            html += '<input id="C' + data["data"][i]["pic_id"] + '" name="id[]" value="' + data["data"][i]["pic_id"] + '" type="checkbox" class="imgIpt decorate">';
                            html += '</label>';
                            html += '<p class="albumsDefa"><input id="' + data["data"][i]["pic_id"] + '" class="editInput1 AP-add12" readonly=""  value="' + data["data"][i]["pic_name"] + '" title="双击名称可以进行编辑" style="cursor:pointer;"><span class="AP-add11" title="双击名称可以进行编辑"><i class="icon icon-edit pull-right"></i></p>';
                            html += '<p class="editDel" style="min-height:102px">';
                            if (!data["data"][i]["is_wide"]) {
                                html += '<a href="javascript:void(0);" class="btn btn-default btn-info"><input accept="image/*" type="file" name="file_upload"  data-is_video="' + data["data"][i]["is_wide"] + '" id="file_' + data["data"][i]["pic_id"] + '" class="input-file AP-add10" size="1" data-pic_id = "' + data["data"][i]["pic_id"] + '" style="left:0;">替换上传</a>';
                            }
                            html += '<a href="javascript:void(0);" class="btn btn-default AP-add9" nc_type="dialog" dialog_title="转移相册" uri="rfghfdg" data-aid="' + data["data"][i]["album_id"] + '" data-pid="' + data["data"][i]["pic_id"] + '">移动素材</a>';
                            if (!data["data"][i]["is_wide"]) {
                                html += '<a href="javascript:void(0);" class="btn btn-default AP-add6" data-id="' + data["data"][i]["pic_id"] + '">设为封面</a>';
                            }
                            html += '<a href="javascript:void(0)" class="btn btn-default AP-add7" data-id="' + data["data"][i]["pic_id"] + '">删除素材</a>';
                            html += '<a href="JavaScript:void(0);" class="btn btn-default AP-add8" data-id="' + data["data"][i]["pic_id"] + '">复制链接</a><div style="text-indent: -999em;height: 2px;"><input type="text" id="hidden_img_' + data["data"][i]["pic_id"] + '" value="' + __IMG(data["data"][i]["pic_cover"]) + '"/></div>';
                            html += '</p>';
                            html += '</div>';
                            html += '</li>';
                        }
                    } else {
                        html += '<div class="empty-box">暂无符合条件的数据记录</div>';
                    }
                    $("#albumList").html(html);
                    utilAdmin.page(".M-box3", data['total_count'], data["page_count"], page_index, LoadingInfo);
                }
            });
        }

// 反选
        function switchAll() {
            $('input[type="checkbox"]').each(function () {
                if ($(this).prop("checked") == true) {
                    $(this).prop("checked", false);
                } else {
                    $(this).prop("checked", true);
                }
            });
        }

//批量操作
        function submit_form(type) {
            if (type != 'move') {
                $('#batchClass').hide();
            }
            var id = '';
            $('input[type=checkbox]:checked').each(function () {
                if (!isNaN($(this).val())) {
                    id = $(this).val() + "," + id;
                }
            });
            if (id == '') {
                utilAdmin.message('请选择素材！');
                return false;
            } else {
                id = id.substring(0, id.length - 1);
            }
            if (type == 'del') {
                deletePicture(id);
            } else if (type == "changealbum") {
                var album_id = $("#album_id").val();
                changeAlbumClassBox(album_id, id);
            }
        }

//删除素材
        function deletePicture(pic_id_array) {
            utilAdmin.alert('您确定要删除已选中素材吗?<br/>提示：已使用素材将不会被删除!', function () {
                $.ajax({
                    type: "post",
                    url: "{:__URL('ADMIN_MAIN/system/deletepicture')}",
                    data: {"pic_id_array": pic_id_array},
                    dataType: "json",
                    success: function (data) {
                        if (data['code'] > 0) {
                            utilAdmin.message(data["message"], 'success', function () {
                                LoadingInfo($('#page_index').val());
                            });
                        } else {
                            utilAdmin.message('部分素材正在商品中使用，没有被删除', 'info', function () {
                                LoadingInfo($('#page_index').val());
                            });
                        }
                    }
                });
            })
        }

//替换上传
        /**
         * 上传文件
         * @param fileid 当前input file类型
         * @param data 传输的数据 file_path属性必传
         * @source admin pc sourcel
         */
        function uploadFile(fileid, data, callBack, source) {
            var dom = document.getElementById(fileid);
            var file = dom.files[0];//File对象;
            if (validationFile(file, source)) {
                $.ajaxFileUpload({
                    url: __URL(ADMINMAIN + '/upload/uploadfile'), //用于文件上传的服务器端请求地址
                    secureuri: false, //一般设置为false
                    fileElementId: fileid, //文件上传空间的id属性  <input type="file" id="file" name="file" />
                    dataType: 'json', //返回值类型 一般设置为json
                    data: data,
                    async: false,
                    contentType: "text/json;charset=utf-8",
                    success: function (res) { //服务器成功响应处理函数
                        callBack.call(this, res);
                    }
                });
            }
        }

        /**
         * 验证文件是否可以上传
         * @param file JS DOM文件对象
         * @source admin pc sourcel
         */
        function validationFile(file, source) {
            var fileTypeArr = ['application/php', 'text/html', 'application/javascript', 'application/msword', 'application/x-msdownload', 'text/plain'];
            if (null == file)
                return false;

            if (!file.type) {
                if (source == 1)
                    layer.msg("文件类型不合法");

                else if (source == "pc")
                    $.msg("文件类型不合法");

                else
                    showTip("文件类型不合法", "warning");

                return false;
            }

            var flag = false;
            for (var i = 0; i < fileTypeArr.length; i++) {
                if (file.type == fileTypeArr[i]) {
                    flag = true;
                    break;
                }
            }

            if (flag) {
                if (source == 1)
                    layer.msg("文件类型不合法");

                else if (source == "pc")
                    $.msg("文件类型不合法");

                else
                    showTip("文件类型不合法", "warning");

                return false;
            }

            return true;
        }
        function change_photo(event) {
            var fileid = $(event).attr("id");
            var pic_id = $(event).data("pic_id");
            var is_video = $(event).data("is_video");
            var album_id = Number($("#album_id").val());
            var data = {
                "album_id": album_id,
                "type": "1,2,3,4",
                "pic_id": pic_id
            };
            if (is_video) {
                var data = {
                    "album_id": album_id,
                    "type": "",
                    "pic_id": pic_id,
                    "file_type": 1
                };
            }
            uploadFile(fileid, data, function (res) {
                if (res.code > 0) {
                    utilAdmin.message(res.message, 'success', function () {
                        LoadingInfo($('#page_index').val());
                    });
                } else {
                    utilAdmin.message(res.message, 'danger');
                }
            });
        }

//控制素材名称input焦点可编辑
        function _focus(o) {
            var name;
            obj = o;
            name = obj.val();
            obj.removeAttr("readonly");
            obj.attr('class', 'editInput2');
            obj.select();
            obj.blur(function () {
                if (name != obj.val()) {
                    _save(this);
                } else {
                    obj.attr('class', 'editInput1');
                    obj.attr('readonly', 'readonly');
                }
            });
        }

        function _save(obj) {
            var pic_id = obj.id;
            var pic_name = obj.value;
            $.ajax({
                type: "post",
                url: "{:__URL('ADMIN_MAIN/system/modifyalbumpicturename')}",
                data: {"pic_id": pic_id, "pic_name": pic_name},
                dataType: "json",
                success: function (data) {
                    if (data["code"] > 0) {
                        utilAdmin.message(data["message"], 'success', function () {
                            LoadingInfo($('#page_index').val());
                        });
                    } else {
                        utilAdmin.message(data["message"], 'danger');
                    }
                }
            })
        }

        function changeAlbumClassBox(album_id, pic_id) {
            $('#change_album_class').modal('show');
            $("#change_album_id").val(album_id);
            $("#change_pic_id").val(pic_id);
        }

        function changeAlbumClass() {
            var pic_id = $("#change_pic_id").val();
            var album_id = $("#change_album_id").val();
            $.ajax({
                type: "post",
                url: "{:__URL('ADMIN_MAIN/system/modifyalbumpictureclass')}",
                data: {"pic_id": pic_id, "album_id": album_id},
                dataType: "json",
                success: function (data) {
                    if (data["code"] > 0) {
                        $('#change_album_class').modal('hide');
                        utilAdmin.message(data["message"], 'success', function () {
                            LoadingInfo(1);
                        });
                    } else {
                        utilAdmin.message(data["message"], 'danger');
                    }
                }
            });
        }
        /**
         复制素材路径
         */
        function JScopy(id) {
            var url = $("#img_" + id).attr('src');
            if (url.indexOf("http://") == -1 && url.indexOf("https://") == -1) {
                var domain = document.domain;
                url = "http://" + domain + url;
            }
            $("#hidden_img_" + id).val(url);
            var iurl = document.getElementById('hidden_img_' + id);
            iurl.select();
            document.execCommand("Copy");
            utilAdmin.message("复制成功", 'success');
        }
        function changeAlbumClassCover(pic_id) {
            var album_id = $("#album_id").val();
            $.ajax({
                type: "post",
                url: "{:__URL('ADMIN_MAIN/system/modifyalbumclasscover')}",
                data: {"pic_id": pic_id, "album_id": album_id},
                dataType: "json",
                success: function (data) {
                    if (data["code"] > 0) {
                        utilAdmin.message(data["message"], 'success');
                    } else {
                        utilAdmin.message(data["message"], 'danger');
                    }
                }
            });
        }
        $('.btn-file').click(function () {
            var album_id = $("#album_id").val();
            var is_video = $(this).data('is_video');
            var dataAlbum = {
                "album_id": album_id,
                "type": "1,2,3,4"
            };
            if (is_video) {
                dataAlbum = {
                    "album_id": album_id,
                    "type": "",
                    "file_type": 1
                };
            }
            var url = "{:__URL('ADMIN_MAIN/upload/uploadFile')}";
            utilAdmin.AlbumimgUpload(url, dataAlbum, function (file_url) {
                LoadingInfo(1);
            });
        })


        $('body').on('click', '.search_to', function () {
            LoadingInfo(1);
        });
        $('body').on('change', '#is_use', function () {
            LoadingInfo(1);
        });
        $('body').on('click', '.AP-add1', function () {
            $('input[type="checkbox"]').each(function () {
                $(this).prop("checked", true);
            });
        });
        $('body').on('click', '.AP-add2', function () {
            switchAll();
        });
        $('body').on('click', '.AP-add3', function () {
            submit_form('del');
        });
        $('body').on('click', '.AP-add4', function () {
            submit_form('changealbum');
        });
        $('body').on('click', '.AP-add5', function () {
            changeAlbumClass();
        });
        $('body').on('click', '.AP-add6', function () {
            var id = $(this).attr('data-id');
            changeAlbumClassCover(id);
        });
        $('body').on('click', '.AP-add7', function () {
            var id = $(this).attr('data-id');
            deletePicture(id);
        });
        $('body').on('click', '.AP-add8', function () {
            var id = $(this).attr('data-id');
            JScopy(id);
        });
        $('body').on('click', '.AP-add9', function () {
            var aid = $(this).attr('data-aid');
            var pid = $(this).attr('data-pid');
            changeAlbumClassBox(aid, pid);
        });
        $('body').on('change', '.AP-add10', function () {
            var _this = $(this);
            change_photo(_this);
        });
        $('body').on('dblclick', '.AP-add11', function () {
            _focus($(this).prev());
        });
        $('body').on('dblclick', '.AP-add12', function () {
            $(this).unbind();
            _focus($(this));
        });


    })
</script>
{/block}